<template>
  <div class="app-container">
    <el-card class="box-card Breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
        <el-breadcrumb-item>活动列表</el-breadcrumb-item>
        <el-breadcrumb-item>活动详情</el-breadcrumb-item>
      </el-breadcrumb>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>店铺设置</span>
      </div>
      <div>
        <el-tabs>
          <el-tab-pane label="店铺权益" name="first">
            <el-form ref="form" :model="form" label-width="200px">
              <div class="equity">
                <div class="equityhead">
                  <span class="el-dropdown-link">
                    一级权益<i class="el-icon-arrow-down el-icon--right" />
                  </span>
                  <span><a href="javascript">编辑</a><a href="javascript">复制</a></span>

                </div>
                <div class="equitycontent">
                  <div class="equitycontenta">
                    <el-form-item label="可上架商品数量">
                      <el-input v-model="form.name" />
                    </el-form-item>
                    <el-form-item label="优惠价">
                      <el-input v-model="form.name" />
                    </el-form-item>
                  </div>
                  <div class="equitycontentb">
                    <el-form-item
                      label="备注：请商家7个工作日确认"
                    >
                      <el-input v-model="form.name" />
                    </el-form-item>
                    <el-form-item label="价格">
                      <el-input v-model="form.name" />
                    </el-form-item>
                  </div>
                </div>
              </div>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="店铺行业" name="second">
            <el-form ref="form" :model="form" label-width="80px">
              <div class="industryhead">
                <el-form-item
                  label="行业名称"
                >
                  <el-input v-model="industryname" />
                </el-form-item>

                <div>
                  <el-button class="Storethequery" type="primary" @click="queryindustry">查询</el-button>
                  <el-button class="Querythereset" @click="Querythereset">重置</el-button>
                </div>
              </div>
              <el-tag class="el-tag"><i class="el-icon-warning" /><span>已选择 {{ Storeindustryselect.length }} 项   服务调用总计：36.4 万  </span> <a href="javascript">清空</a></el-tag>
              <el-table
                :header-cell-style="{background:'#eef1f6',color:'#606266' ,height:'59px'}"
                :data="tableData"
                style="width: 100%"
                @selection-change="handleSelectionChange"
              >
                >
                <el-table-column
                  type="selection"
                  width="55"
                />
                <el-table-column
                  prop="industry"
                  label="行业名称"
                  width="560"
                />

                <el-table-column
                  prop="describe"
                  label="描述"
                />
                <el-table-column
                  fixed="right"
                  label="操作"
                  width="100"
                >
                  <template slot-scope="scope">
                    <el-button type="text" size="small" @click="shopdelete(scope.row)">删除</el-button>
                    <el-button type="text" size="small">编辑</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-tag class="el-tagbottmon"><div>AntDesign@example.com</div> <div>AntDesign@example.com</div></el-tag>
              <div class="block">
                <span class="demonstration" />shop
                <el-pagination
                  class="pagination"
                  background
                  :current-page="currentPage1"
                  :page-sizes="[5 ,7, 12, 15]"
                  :page-size="100"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="Shopsinfo.total"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                />
              </div>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="角色管理" name="third">
            <div class="role management ">
              <el-table

                :header-cell-style="{background:'#eef1f6',color:'#606266',height:'47.4px'}"
                :data="rolemanagements"
                style="width: 100%;margin-bottom: 20px;"
                row-key="id"

                :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
              >
                <el-table-column
                  prop="typename"
                  label="类别名称"
                  sortable
                />
                <el-table-column
                  prop="describe"
                  label="描述"
                  sortable
                />
                <el-table-column
                  fixed="right"
                  label="操作"
                  width="100"
                >
                  <template slot-scope="scope">
                    <el-button type="text" size="small" @click="(scope.row)">查看</el-button>
                    <el-button type="text" size="small">编辑</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination
                background
                :current-page="currentPage1"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400"
              />
              <!-- @size-change="handleSizeChange"
                @current-change="handleCurrentChange" -->
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script>

import { getStoreinformation, queryindustry, rolemanagement, shopdelete } from '@/api/storesetting';
import { Sonrecursive } from '@/utils/index';
export default {
  data() {
    return {
      currentPage1: 1,

      // 角色管理
      // rolemanagements: '',
      Storeindustryselect: '',
      industryname: '',
      Shopsinfo: {
        total: 5,
        query: '',
        pagenum: '0',
        pagesize: '5',
      },
      rolemanagements: [],

      getStoreinformations: '',
      drawer: false,
      direction: 'rtl',
      form: {
        name: '',
      },
      tableData: [
        // {
        //   date: '2016-05-02',
        //   name: '王小虎',
        //   address: '上海市普陀区金沙江路 1518 弄',
        // }, {
        //   date: '2016-05-04',
        //   name: '王小虎',
        //   address: '上海市普陀区金沙江路 1517 弄',
        // },
      ],
    };
  },
  created() {
    this.rolemanagement();
    this.getStoreinformation();
  },
  methods: {
    // 店铺删除
    shopdelete(row) {
      console.log(row);
      shopdelete(row.id).then(() => {
        this.getStoreinformation();
      });
    },
    Querythereset() {
      this.getStoreinformation();
      this.industryname = '';
    },
    // 单复选
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val;
      this.Storeindustryselect = val;
    },

    // 店铺查询
    queryindustry() {
      if (this.industryname === '') {
        this.$message({
          message: '查询内容不能为空',
          type: 'warning',
        });
      } else {
        queryindustry({ industry: this.industryname }).then((res) => {
          console.log(res);
          this.tableData = res.data;
        });
      }
    },
    handleCurrentChange(newpagenum) {
      console.log(newpagenum + 'bbb');
      this.Shopsinfo.pagenum = newpagenum;
      this.getStoreinformation();
    },
    handleSizeChange(newpagesize) {
      console.log(newpagesize);
      this.Shopsinfo.pagesize = newpagesize;
      this.getStoreinformation();
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    // 角色管理

    rolemanagement() {
      rolemanagement().then((res) => {
        // console.log(JSON.stringify(res.data), 'res.data');
        this.rolemanagements = Sonrecursive(res.data, '');
        // console.log(Sonrecursive(res.data, ''));
      });
    },

    getStoreinformation() {
      getStoreinformation(this.Shopsinfo).then((res) => {
        this.tableData = res.data;
        this.Shopsinfo.total = res.headers['x-total-count'] - 0;
      });
    },
  },
};

</script>

<style lang="scss" scoped>
.app-container{
  padding: 0px
};

.el-tabs__nav-wrap{
 margin: 0px
};
.line{
  text-align: center;
}
.Breadcrumb{
margin-top: 10px;

};
.Setupshop{
.grid-content{
background-color: rgba(250, 250, 250, 1);
height: 46px;
a{
  font-size: 20px
}
};
  margin-top: 30px;
}
.clearfix{
  .el-form{
    border-radius: 5px;
    border: solid 1px rgb(238, 241, 246);
  };

  span{
    font-size: 20px;
    font-weight: 600;

  }
    height: 20px;

  .el-col-14{
    width: 100px;
  };

}

.box-card{

  margin-top: 20px;
}
.equity{
  border: solid 1px rgb(194, 191, 191);
  border-radius: 3px;
     .equityhead{
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: rgba(238, 241, 246);
       height: 40px;
       border-radius: 3px 3px 0px 0px;
       border-bottom: 1px solid  rgb(194, 191, 191);
       .el-dropdown-link {
         margin-left: 20px;
       cursor: pointer;
       color: #000;
       font-weight: 700;
        }
        span{
          a{
            margin-left: 20px;
            color:#409EFF;
            margin-right: 20px;
          }
        }
     }
    .equitycontent{
      margin-top: 20px;
     }
     .equitycontenta{
       display: flex;

     }
      .equitycontentb{
       display: flex;

     }
  }
.industryhead{
  display: flex;
  justify-content: space-between;
}
.el-alert{
  background-color: rgba(10, 191, 236, 0.678);
  color: #fff;
}
.el-tagbottmon{
  display: flex;
  align-items: center;
justify-content: space-between;
  height: 50px;
  border-radius:  0px;

div{
  text-align: center;
  width: 170px;
  font-size: 4px;
  color: rgb(100, 100, 100);
  background-color: #fff;
  margin-right: 260px;
  margin-left: 50px;
  height: 30px;
  border-radius: 3px;
  border: 1px solid rgb(194, 191, 191)
}

};
.el-tag{
width: 100%;
  margin-bottom: 10px;
span{color: #000;}
}
.el-icon-warning{
  margin: 0px 3px 0px -2px;
}
.pagination{
  margin-top: 10px;
}
.el-card{

  border-bottom: 0px solid #000 !important;
}

</style>
